Skip to main content

Installation

warning

Features of website widget is in experimental stage. Please report any issues you encounter. Currently, only PUBLIC, existing, manually created projects are supported, with no authentication.

Introduction​

The Gendox Chat Widget is the easiest way to integrate an AI chat system into your website, enabling direct integration with popular AI models such as OpenAI ChatGPT, Cohere, LLaMA, and others. This widget allows you to add advanced chatbot capabilities to your platform with minimal setup.

Getting Started​

To begin using the Gendox Chat Widget, you must first create an account on the Gendox platform. Follow these steps:

  1. Create a Gendox Account.
  2. Create a Project and an Agent [link to guide].
  3. Upload Information [link to guide].
  4. Make the Project Public. (This step is crucial for the widget to function properly).

Once your agent has been created, navigate to the Gendox webapp homepage, click on your project, and retrieve the following from the browser's URL parameters:

  • organizationId
  • projectId.

Installation​

To install the Gendox widget on any website, simply add the following script to the <head> section of your webpage:

<script
    id="gendox-chat-script"
    src="https://app.gendox.dev/gendox-sdk/gendox-widget-plugin.js"
    data-gendox-src="https://app.gendox.dev"
    data-organization-id="[organizationId]"
    data-project-id="[projectId]">
</script>

Once this script is included, the Gendox widget will automatically appear in the bottom-right corner of your page.

Configuration​

1. Styling​

You can easily customize the appearance and position of the Gendox chat widget by overriding its default CSS styles using CSS specificity. For example, you can adjust the location of the chat bubble or window using the following CSS:

#gendox-chat-container-id.gendox-chat-container-position {
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    z-index: 1000;
    border-radius: 20px;
}

2. Parameters​

The following parameters can be customized by passing them into the script:

Data AttributeDescriptionDefault ValueExample
data-gendox-srcThe base URL for the Gendox chat embed source.'' (empty string)data-gendox-src="https://app.gendox.dev"
data-organization-idThe unique identifier of your organization within Gendox.'' (empty string)data-organization-id="org_12345"
data-project-idThe unique identifier of the specific project within Gendox.'' (empty string)data-project-id="proj_abcde"
data-gendox-container-idThe ID assigned to the chat container element. Allows customization of the container element for styling or interaction purposes.gendox-chat-container-iddata-gendox-container-id="custom-container-id"
data-gendox-iframe-idThe ID assigned to the chat iframe element. Allows customization of the iframe element for styling or integration with other components.gendox-chat-iframe-iddata-gendox-iframe-id="custom-iframe-id"

More parameter configurations will be documented in future updates.

Events​

The Gendox widget uses the Post Message API to exchange messages between the widget and the parent webpage. Developers can set up event listeners to receive notifications from the Gendox chat app and send information back to it.

Table of Events​

Event TypeDescription
gendox.events.initialization.requestGendox requests initial configuration from the parent website.
gendox.events.initialization.responseThe agent sends a response message back to the user.
gendox.events.embedded.chat.toggle.actionEvent triggered when embedded chat iframe window is opened or closed.
gendox.events.listener.removedEvent triggered when message listener from parent window has been removed from gendox.
gendox.events.chat.message.new.sentEvent triggered when a message is sent from the user to the gendox chat for completion.
gendox.events.chat.message.new.response.receivedA completion response has been received.
gendox.events.chat.message.context.local.requestEvent triggered when gendox requests local context from the parent window. This can be the content of the page that the user is viewing, or the text selected, or whatever you want!
gendox.events.chat.message.context.local.responseGendox is waiting this events from the parent window. Whatever is sent will be included in the local context in the completion message.
gendox.events.chat.message.tool_calls.requestList of Tools that the Agent wants to be executed in the frontend.
gendox.events.chat.message.tool_calls.responseNot Supported Yet. The responses for the Tools the agent requested. This responses will be provided to the Agent to complete the response.